<template>
	<view class="bind_box">
		<!-- 未绑定 -->
		<form action="" v-if="!showHasBind">
			<view class="input_field">
				<label for="">手机号</label>
				<input type="text" v-model="mobilePhone" placeholder="请输入您要绑定的手机号" placeholder-style="color: #C6C6C6;" />
			</view>
			<view class="input_field">
				<label for="">验证码</label>
				<view class="dis_fx fx_column fx_between"><input type="text" v-model="smsCode" placeholder="请输入验证码" class="flex1" placeholder-style="color: #C6C6C6;" />
					<button class="get_code" v-if="showGet" @click="getCode">获取验证码</button>
					<button class="reget" v-else>({{btnNum}})s后重新获取</button>
				</view>
			</view>
			<button class="pub_btn" @click="bindMobile">确认绑定</button>
		</form>
		<!-- 已绑定 -->
		<view class="bind_prompt" v-if="showHasBind">
			<image src="../../static/phone.png"></image>
			<view class="prompt">已绑定手机号</view>
			<view class="phone_num">{{mobilePhone}}</view>
			<button class="pub_btn" @click="changeMobile">更换手机</button>
		</view>
	</view>
</template>

<script>
	import util from '../../common/util.js'
	export default {
		data() {
			return {
				mobilePhone:'',
				smsCode:'',
				btnNum:'',
				showGet:true,
				showHasBind:false
			}
		},
		methods: {
			//更换手机号
			changeMobile(){
				this.mobilePhone="";
				this.smsCode="";
				this.showHasBind=false;
			},
			//绑定手机号
			bindMobile(){
				var that=this;
				if(!util.checkPhone(that.mobilePhone)){
					uni.showToast({
						title:'请输入正确的手机号',
						icon:"none"
					})
					return;
				}
				if(!that.smsCode){
					uni.showToast({
						title:'请输入验证码',
						icon:"none"
					})
					return;
				}
				uni.showLoading({
					mask:true,
					title: '加载中'
				});
				util.fetchPost('/user/bindPhone',{phone:that.mobilePhone,smsCode:that.smsCode},function(res){
						if(res.success){
							that.showHasBind=true
						}
						uni.showToast({
							title:res.msg,
							icon:"none"
						})
						uni.hideLoading();
				},function(res){
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
					uni.hideLoading();
					
				},true)	
			},
			//获取验证码
			getCode(){
				var that=this;
				if(util.checkPhone(that.mobilePhone)){
					util.fetchPost('/api/sendBindCode',{bindPhone:that.mobilePhone},function(res){
						that.showGet=false;
						that.btnNum=60;
						that.cutDown();
						uni.showToast({
							title:res.msg,
							icon:"none"
						})
					},function(res){
						uni.showToast({
							title:res.msg,
							icon:"none"
						})
					},true)	
				}else{
					uni.showToast({
						title:'请输入正确的手机号',
						icon:"none"
					})
				}
			},
			//倒计时
			cutDown(){
				var that=this;
				let tim=60;
				var timer=setInterval(function(){
					if(tim>0){
						tim-=1;
						that.btnNum=tim;
					}else{
						that.showGet=true;
						clearInterval(timer);
					}
				},1000)
			}
			
		}
	}
</script>

<style>
	.bind_box{
		padding: 0 75upx;
	}
	.bind_box .input_field{
		border-bottom: 1px solid #EAEAEA;
		padding: 30upx 0 20upx;
	}
	.bind_box .input_field label{
		font-size: 32upx;
		color: #333333;
		display: block;
		margin-bottom: 10upx;
	}
	.bind_box .input_field input{
		font-size: 28upx;
		color: #333333;
	}
	.bind_box .input_field .get_code{
		font-size: 24upx;
		color: #333333;
		background: #FFC800;
		height: 50upx;
		line-height: 50upx;
		border-radius: 25upx;
		margin: 0;
	}
	.bind_box .input_field .reget{
		font-size: 24upx;
		color: #333333;
		background: #999999;
		height: 50upx;
		line-height: 50upx;
		border-radius: 25upx;
		margin: 0;
	}
	.bind_box .input_field .get_code:after{
		border: 0 none;
	}
	.bind_box .pub_btn{
		margin-top: 130upx;
		background: #FFC800;
		color: #333333;
		font-size: 32upx;
		height: 90upx;
		line-height: 90upx;
		border-radius: 45upx;
		width: 100%;
	}
	.bind_box .pub_btn:after{
		border: 0 none;
	}
	.bind_prompt{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.bind_prompt image{
		width: 248upx;
		height: 246upx;
		margin: 90upx 0 50upx;
	}
	.bind_prompt .prompt{
		color: #999999;
		font-size: 28upx;
	}
	.bind_prompt .phone_num{
		color: #333333;
		font-size: 48upx;
	}
</style>
